#mainPage .mainPage{
    width: 100%;
    font-size: 16px;
    padding-top: 50px;
}
#mainPage .header{
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
}
#mainPage .header a{
    color:#777;
}
#mainPage .header a:hover{
    text-decoration: none;
    color:#5e5e5e;
}


#mainPage .navbar-inverse .navbar-toggle {
    border-color: #ddd;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #888;
}

#mainPage .navbar-inverse .navbar-toggle:hover,
#mainPage .navbar-inverse .navbar-toggle:focus
{
    background-color: #ddd;
}

#mainPage .navbar-inverse .navbar-toggle:visited{
    background-color: transparent;
}

#mainPage .navbar-toggle{
    float: left;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
    }

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right .sidebar-offcanvas {
        right: -40%; /* 6 columns */
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -40%; /* 6 columns */
    }

    .row-offcanvas-right.active {
        right: 40%; /* 6 columns */
    }

    .row-offcanvas-left.active {
        left: 40%; /* 6 columns */
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 40%; /* 6 columns */
    }
}

/*
 * end of Off Canvas
 * --------------------------------------------------
 */

.sidebar,.page-wrapper{
    float: left;
    display: inline-block;
}

.sidebar{
    background-color:#f8f8f8 ;
}

.page-wrapper{
    min-height: 600px;
    background-color: #fff;
    padding:20px 30px;
}

@media (min-width: 1099px){
    .sidebar{
        width: 20%;
    }
    .page-wrapper{
        min-width: 80%;
    }
}

@media screen and (max-width: 1099px) and (min-width: 767px){
    .sidebar {
        width: 26%;
    }

    .page-wrapper {
        min-width: 74%;
    }

}

@media screen and (max-width: 767px){
    .page-wrapper {
        min-width: 100%;
    }
}


/*@media (max-width: 767px){*/
    /*.sidebar{*/
        /*width: 25%;*/
    /*}*/

    /*.page-wrapper{*/
        /*min-width: 75%;*/
    /*}*/
/*}*/



